<template>
    <AuthWrapper>
        <template #title>Register</template>
        <template #subtitle>注册一个新账号</template>

        <form @submit.prevent="register">
            <div class="mb-1">
                <FloatingInput v-model="username" type="text" label="用户名" required />
            </div>
            <div class="mb-1">
                <FloatingInput v-model="phone" type="phone" label="手机号" required />
            </div>
            <div class="mb-1">
                <FloatingInput v-model="email" type="email" label="邮箱" required />
            </div>
            <div class="mb-1">
                <FloatingInput v-model="password" type="password" label="密码" required />
            </div>
            <div class="mb-2">
                <FloatingInput
                    v-model="confirmPassword"
                    type="password"
                    label="确认密码"
                    required
                />
            </div>
            <button
                type="submit"
                class="btn btn-success w-100 d-flex justify-content-center align-items-center"
                :disabled="loading"
            >
                <span
                    v-if="loading"
                    class="spinner-border spinner-border-sm me-2"
                    role="status"
                    aria-hidden="true"
                />注册
            </button>
        </form>

        <p class="mt-4 text-center text-muted small">
            已有账号？<router-link to="/login">去登录</router-link>
        </p>
    </AuthWrapper>
</template>

<script setup>
import FloatingInput from '../components/FloatingInput.vue';
import AuthWrapper from '../components/AuthWrapper.vue';

import { useRegister } from '../composables/useRegister';

const { username, phone, email, password, confirmPassword, loading, register } = useRegister();
</script>
